<template>
	<view>
		<view class="bg-white flex-start">
			<u-input v-model="name" :border="true" input-align="right" placeholder="请输入功能名称" />
			<u-input v-model="code" :border="true" input-align="right" placeholder="请输入功能编码" />
			<u-input v-model="parentName" :border="true" input-align="right" placeholder="请输入父类名称" />
		</view>
		<view class="flex-end mar-0-5">
			<view class="flex-start center">
				<u-switch v-model="hideSort" :size="30"></u-switch>
				<view @click="hideSort=!hideSort">显示排序</view>
			</view>
		</view>
		<view v-for="(item,index) in dataSource">
			<view class="between hang">
				<view class="col-1">
					<view>
						<view class="flex-start mar-0-5 baseline">
							<view class="font-weight">{{item.name}}</view>
							<view class="mar-0-5"> {{item.id}}</view>
							<view v-if="hideSort" class="font-size-10 color-purple mar-0-5">{{item.sort}}</view>
						</view>
						<view v-if="item.child">
						</view>
						<view v-else class="flex-start mar-0-5" style="text-indent: 2em;">
							<view class="color-blue">{{item.path}}</view>
						</view>
					</view>
				</view>
				<image class="img" @click="yulan(item)" :src="baseURL+item.pathImg"></image>
				<view class="center font-size-20">
					<view @click="openAdd(item)">
						<u-icon class="color-green" name="plus-circle-fill"></u-icon>
					</view>
					<view @click="openEdit(item)">
						<u-icon class="color-green" name="edit-pen-fill"></u-icon>
					</view>
					<view @click.stop="openDialogStatus(item)">
						<u-icon v-if="item.status==1" class="color-green" name="lock-opened-fill"></u-icon>
						<u-icon v-else class="color-red" name="lock-fill"></u-icon>
					</view>
					<view @click.stop="openDialogDelete(item)">
						<u-icon name="trash-fill"></u-icon>
					</view>
				</view>
			</view>
			<view v-for="(child,index2) in item.child">
				<view class="between hang">
					<view class="col-1">
						<view style="text-indent: 2em;">
							<view class="flex-start mar-0-5 baseline">
								<view class="font-weight">{{child.name}}</view>
								<view class="mar-0-5"> {{child.id}}</view>
								<view v-if="hideSort" class="font-size-10 color-purple mar-0-5">{{child.sort}}</view>
							</view>
							<view class="flex-start mar-0-5">
								<view class="color-blue">{{child.path}}</view>
							</view>
							<view class="flex-start mar-0-5 over-1 font-size-10">
								<view class="color-gray">{{child.describe}}</view>
							</view>
						</view>
					</view>
					<image class="img" @click="yulan(child)" :src="baseURL+child.pathImg"></image>
					<view class="center font-size-20">
						<view @click="openAdd(child)">
							<u-icon class="color-green" name="plus-circle-fill"></u-icon>
						</view>
						<view @click="openEdit(child)">
							<u-icon class="color-green" name="edit-pen-fill"></u-icon>
						</view>
						<view @click.stop="openDialogStatus(child)">
							<u-icon v-if="child.status==1" class="color-green" name="lock-opened-fill"></u-icon>
							<u-icon v-else class="color-red" name="lock-fill"></u-icon>
						</view>
						<view @click.stop="openDialogDelete(child)">
							<u-icon name="trash-fill"></u-icon>
						</view>
					</view>
				</view>
			</view>
		</view>
		<u-popup v-model="showAdd" mode="bottom" length="80%" border-radius="15">
			<MenuAddVue @close="close"></MenuAddVue>
		</u-popup>
		<u-popup v-model="showEdit" mode="bottom" length="80%" border-radius="15">
			<MenuEditVue :menuItem="menuItem" @close="close"></MenuEditVue>
		</u-popup>
		<DialogVue :show="showDialog" title="温馨提示" @confirm="confirm" @update:show="showDialog=false"
			:mask-close-able="true">
			<view class="slot-content">
				<view class="text-center">{{content}}</view>
			</view>
		</DialogVue>
		<u-modal v-model="yulanShow" :show-confirm-button="false" :show-title="false" width="100%"
			:mask-close-able="true">
			<view class="slot-content center">
				<image :src="yulanSrc"></image>
			</view>
		</u-modal>
	</view>
</template>

<script>
	import {
		mapGetters,
		mapActions
	} from 'vuex'
	import {
		menuSelect,
		menuDelete,
		menuStatus
	} from '../../api/menu';
	import MenuAddVue from './MenuAdd.vue';
	import MenuEditVue from './MenuEdit.vue';
	import DialogVue from '../../components/Dialog/Dialog.vue';
	export default {
		components: {
			MenuAddVue,
			MenuEditVue,
			DialogVue
		},
		computed: {
			...mapGetters(['hostApi']),
		},
		data() {
			return {
				dataSource: [],
				baseURL: '',
				showAdd: false,
				showEdit: false,
				menuItem: {},
				showDialog: false,
				form: {
					name: '',
					code: '',
					parentName: '',
					status: '',
				},
				name: '',
				code: '',
				parentName: '',
				content: '',
				operateType: 'update', //操作状态
				hideSort: false,
				yulanSrc: '',
				yulanShow: false,
			}
		},
		watch: {
			name(val) {
				this.form.name = val;
				this.search();
			},
			code(val) {
				this.form.code = val;
				this.search();
			},
			parentName(val) {
				this.form.parentName = val;
				this.search();
			}
		},
		mounted() {
			this.baseURL = this.hostApi
			this.init()
		},
		methods: {
			init() {
				menuSelect(this.form).then(res => {
					let map = new Map()
					let list = [];
					if (res.length > 0) {

						res.forEach(item => {
							if (item.parentId == 0) {
								map.set(item.id, item);
							}
						})

						map.forEach((v, k) => {
							list.push(v);
							res.forEach(item => {
								if (k == item.parentId) {
									v.child = v.child || []
									v.child.push(item);
								}
							})
						})
					}
					this.dataSource = list
				})
			},
			close() {
				this.showAdd = false;
				this.showEdit = false;
				this.init()
			},
			openAdd(item) {
				this.menuItem = {
					parentId: item.parentId,
					parentName: item.parentName,
					status: 1
				};
				this.showEdit = true;
			},
			openEdit(item) {
				this.menuItem = {
					...item
				};
				this.showEdit = true;
			},
			openDialogDelete(item) {
				this.menuItem = {
					...item
				};
				this.operateType = "delete"
				this.content = "是否确定要删除？"
				this.showDialog = true;

			},
			openDialogStatus(item) {
				this.content = "是否要修改状态？"
				this.operateType = "status"
				this.menuItem = {
					...item
				};
				this.showDialog = true;
			},
			confirm() {
				this.showDialog = false;
				if (this.operateType == 'delete') {
					menuDelete(null, this.menuItem.id).then(res => {
						this.init()
					})
				} else if (this.operateType == 'status') {
					menuStatus(null, this.menuItem.id).then(res => {
						this.init()
					})
				}
			},
			search() {
				this.init()
			},
			yulan(item) {
				this.yulanSrc = this.baseURL + item.pathImg
				this.yulanShow = true;
			}
		}
	}
</script>

<style scoped>
	.img {
		width: 30px;
		height: 30px;
	}

	.hang {
		display: flex;
		align-items: center;
		border-bottom: 1px solid rgb(215, 215, 215);
		padding: 5px;
	}

	.col-1 {
		width: 60%;
	}
</style>